<template>
  <div class="content-container">
  <h6 style="color: crimson">商品与赠品管理--><a href="http://localhost:5173/gift">赠品管理</a></h6>
  <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="赠品型号" prop="gmodel">
      <el-input v-model="queryForm.gmodel" style="width: 240px" placeholder="gmodel" clearable />
    </el-form-item>
    <el-form-item label="赠品名称" prop="giftName">
      <el-input v-model="queryForm.giftName" style="width: 240px" placeholder="username" clearable />
    </el-form-item>
    <br>
    <el-form-item label="赠品类型" prop="gtype">
      <el-select v-model="queryForm.gtype" placeholder="giftType" style="width: 240px" clearable  >
        <el-option
            v-for="item in typeOptions.optionData"
            :key="item"
            :label="item"
            :value="item"

        />
      </el-select>
    </el-form-item>
    <el-form-item label="赠品品牌" prop="gbrand">
      <el-select v-model="queryForm.gbrand" placeholder="gbrand" style="width: 240px" clearable  >
        <el-option
            v-for="item in brandOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="赠品颜色" prop="gcolor">
      <el-select v-model="queryForm.gcolor" placeholder="gcolor" style="width: 240px" clearable  >
        <el-option
            v-for="item in ColorOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="querySubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <hr>
  <el-table
      :data="tableList.tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
  >
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="giftName" label="赠品名称" width="180" />
    <el-table-column prop="giftType" label="赠品类型" width="180" />
    <el-table-column prop="minStock" label="最低库存" width="180" />
    <el-table-column prop="marketPrice" label="赠品单价" width="180" />
    <el-table-column prop="purchasePrice" label="采购成本" width="180" />
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary" size="small" @click="selectRow(scope.$index, scope.row)">查看</el-button>
        <el-button type="success" size="small" @click="updateRow(scope.$index, scope.row)">修改</el-button>
        <el-button type="danger" size="small" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        :page-sizes="[2, 5, 10, 50]"
        layout="total, sizes, prev, pager, next"
        :total="tableList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {giftStore} from "@/stores/GiftModel.js";

const selectRow = (index, row) => {
  let giftModel=giftStore()
  giftModel.$id=row.id
  console.log(giftModel.$id)
  router.push({path:"/gift/giftDetail"})
};
const deleteRow=(index, row) => {
  axios.delete("/gift/deleteGift/"+row.id).then(res=>{
    if(res.code===200){
      ElMessage.success("删除成功")
      axios.get("gift/listGifts").then(res=>{
        if(res.code===200){
          tableList.tableData=res.data
        }
      })
      axios.get("/gift/getTatol").then( res=>{})
    }
  })
}

const updateRow=(index, row) => {
  let giftModel=giftStore()
  giftModel.$id=row.id
  giftModel.giftName=row.giftName
  giftModel.giftType=row.giftType
  giftModel.gbrand=row.gbrand
  giftModel.gcolor=row.gcolor
  giftModel.minStock=row.minStock
  giftModel.marketPrice=row.marketPrice
  giftModel.purchasePrice=row.purchasePrice
  console.log(giftModel)
  router.push({path:"/gift/giftUpdate"})
};




const queryForm = ref({
  gmodel:null,
  giftName:null,
  gtype:null,
  gbrand:null,
  gcolor:null,
  pageSize:10,
  pageNum:0
});
const querySubmit = () => {
  console.log(queryForm.value);

  axios.postJson("/gift/ListByParams",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })

};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2 === 1) {
    return 'warning-row';
  } else{
    return 'success-row';
  }
  return '';
};

const tableList =reactive({tableData:[],total:10})
const typeOptions  =  reactive({optionData:[]})
const brandOptions=  reactive({optionData:[]})
const ColorOptions=  reactive({optionData:[]})
const handleSizeChange = (val) => {

  queryForm.value.pageSize=val
  axios.postJson("/gift/ListByParams",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  queryForm.value.pageNum=(val-1)*queryForm.value.pageSize
  axios.postJson("/gift/ListByParams",queryForm.value).then( res=>{
    tableList.tableData=res.data
    console.log(res.data)
  })
};

onMounted(()=>{
  axios.get("gift/listGifts").then(res=>{
    if(res.code===200){
      tableList.tableData=res.data
    }
  })
  axios.get("/gift/paramList").then(res=>{
    if(res.code===200){
      console.log(res.data)
      typeOptions.optionData=res.data.gtypes
      brandOptions.optionData=res.data.gbrands
      ColorOptions.optionData=res.data.gcolors
    }
  })
  axios.get("/gift/getTatol").then( res=>{
    tableList.total=res.data
  })
    }
)
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.content-container {
  overflow-y: auto; /* 或者使用 overflow: scroll */
  max-height: 100vh; /* 设置最大高度为视口高度 */
  width: 100%; /* 设置宽度 */
}

</style>